<template>
  <div class="scroll-board" :style="containerStyle">
    <div class="scroll-header" v-if="showHeader">
      <div 
        v-for="(header, index) in headers" 
        :key="index"
        class="scroll-header-item"
        :style="getHeaderStyle(index)"
      >
        {{ header }}
      </div>
    </div>
    
    <div class="scroll-body" ref="scrollBody">
      <div 
        class="scroll-content" 
        :style="{ transform: `translateY(${translateY}px)` }"
      >
        <div 
          v-for="(row, rowIndex) in displayData" 
          :key="rowIndex"
          class="scroll-row"
          :class="{ 'scroll-row-odd': rowIndex % 2 === 1 }"
          :style="rowStyle"
        >
          <div 
            v-for="(cell, cellIndex) in row" 
            :key="cellIndex"
            class="scroll-cell"
            :style="getCellStyle(cellIndex)"
          >
            <span class="scroll-cell-content">{{ cell }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'

// Props定义
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  headers: {
    type: Array,
    default: () => []
  },
  columnWidths: {
    type: Array,
    default: () => []
  },
  rowHeight: {
    type: Number,
    default: 40
  },
  visibleRows: {
    type: Number,
    default: 5
  },
  scrollSpeed: {
    type: Number,
    default: 2000
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  headerHeight: {
    type: Number,
    default: 45
  },
  backgroundColor: {
    type: String,
    default: 'rgba(0, 0, 0, 0.3)'
  },
  headerBackgroundColor: {
    type: String,
    default: 'rgba(0, 212, 255, 0.2)'
  },
  oddRowBackgroundColor: {
    type: String,
    default: 'rgba(255, 255, 255, 0.05)'
  },
  textColor: {
    type: String,
    default: '#ffffff'
  },
  headerTextColor: {
    type: String,
    default: '#00d4ff'
  },
  fontSize: {
    type: Number,
    default: 14
  },
  autoScroll: {
    type: Boolean,
    default: true
  }
})

// 响应式数据
const scrollBody = ref(null)
const translateY = ref(0)
const currentIndex = ref(0)
let scrollTimer = null

// 计算属性
const containerStyle = computed(() => ({
  backgroundColor: props.backgroundColor,
  height: (props.showHeader ? props.headerHeight : 0) + props.visibleRows * props.rowHeight + 'px',
  fontSize: props.fontSize + 'px',
  color: props.textColor
}))

const rowStyle = computed(() => ({
  height: props.rowHeight + 'px',
  lineHeight: props.rowHeight + 'px'
}))

const displayData = computed(() => {
  if (!props.data.length) return []
  
  // 为了实现无缝滚动，需要复制数据
  const extendedData = [...props.data, ...props.data.slice(0, props.visibleRows)]
  return extendedData
})

// 获取表头样式
const getHeaderStyle = (index) => {
  const width = props.columnWidths[index] || `${100 / props.headers.length}%`
  return {
    width: typeof width === 'number' ? width + 'px' : width,
    height: props.headerHeight + 'px',
    lineHeight: props.headerHeight + 'px',
    backgroundColor: props.headerBackgroundColor,
    color: props.headerTextColor,
    fontWeight: 'bold'
  }
}

// 获取单元格样式
const getCellStyle = (index) => {
  const width = props.columnWidths[index] || `${100 / (props.headers.length || 1)}%`
  return {
    width: typeof width === 'number' ? width + 'px' : width
  }
}

// 开始滚动
const startScroll = () => {
  if (!props.autoScroll || !props.data.length) return
  
  scrollTimer = setInterval(() => {
    currentIndex.value++
    
    if (currentIndex.value >= props.data.length) {
      // 重置到开始位置
      translateY.value = 0
      currentIndex.value = 0
      
      // 短暂延迟后继续滚动
      setTimeout(() => {
        if (scrollTimer) {
          translateY.value = -currentIndex.value * props.rowHeight
        }
      }, 50)
    } else {
      translateY.value = -currentIndex.value * props.rowHeight
    }
  }, props.scrollSpeed)
}

// 停止滚动
const stopScroll = () => {
  if (scrollTimer) {
    clearInterval(scrollTimer)
    scrollTimer = null
  }
}

// 重置滚动
const resetScroll = () => {
  stopScroll()
  currentIndex.value = 0
  translateY.value = 0
  if (props.autoScroll) {
    startScroll()
  }
}

// 监听数据变化
watch(() => props.data, () => {
  resetScroll()
}, { deep: true })

watch(() => props.autoScroll, (newValue) => {
  if (newValue) {
    startScroll()
  } else {
    stopScroll()
  }
})

// 生命周期
onMounted(() => {
  if (props.autoScroll) {
    startScroll()
  }
})

onUnmounted(() => {
  stopScroll()
})

// 暴露方法
defineExpose({
  startScroll,
  stopScroll,
  resetScroll
})
</script>

<style scoped>
.scroll-board {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, 0.3);
  backdrop-filter: blur(10px);
}

.scroll-header {
  display: flex;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(35, 95, 167, 0.2));
  border-bottom: 1px solid rgba(0, 212, 255, 0.5);
}

.scroll-header-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  text-align: center;
  border-right: 1px solid rgba(0, 212, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.scroll-header-item:last-child {
  border-right: none;
}

.scroll-body {
  position: relative;
  overflow: hidden;
}

.scroll-content {
  transition: transform 0.5s ease-in-out;
}

.scroll-row {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease;
}

.scroll-row:hover {
  background-color: rgba(0, 212, 255, 0.1) !important;
}

.scroll-row-odd {
  background-color: v-bind(oddRowBackgroundColor);
}

.scroll-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.scroll-cell:last-child {
  border-right: none;
}

.scroll-cell-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* 数据加载动画 */
@keyframes dataFlow {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.scroll-row {
  animation: dataFlow 0.5s ease-out;
}
</style>
